-
-
Notifications
You must be signed in to change notification settings - Fork 8.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix nav to take full width in the docs page #935
Fix nav to take full width in the docs page #935
Conversation
Deploy preview for docusaurus-preview ready! Built with commit ef884ae |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll give this a more thorough review soon.
lib/static/css/main.css
Outdated
@@ -712,6 +712,11 @@ blockquote { | |||
.mainContainer .wrapper .posts .post { | |||
width: 100%; | |||
} | |||
|
|||
.docMainContainer { | |||
flex-basis: 920px !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we avoid using !important
s?
@@ -66,7 +66,7 @@ class DocsLayout extends React.Component { | |||
metadata={metadata}> | |||
<div className="docMainWrapper wrapper"> | |||
<DocsSidebar metadata={metadata} /> | |||
<Container className="mainContainer"> | |||
<Container className="mainContainer docMainContainer"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not directly add the rules within docMainContainer
into mainContainer
? Is there a need for a new class?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
because the class is used in other page, like blog so it may break the other page if i modify it directly
@@ -116,7 +116,7 @@ class DocsLayout extends React.Component { | |||
)} | |||
</Container> | |||
{hasOnPageNav && ( | |||
<nav className="onPageNav"> | |||
<nav className="onPageNav docOnPageNav"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same question regarding this line.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
because the class is used in other page, like blog so it may break the other page if i modify it directly
@yangshun adjusted based on your review! 😃 please review! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great after the fix!
Great work @fiennyangeln! |
Thank you @fiennyangeln 😄 |
Thanks for the review @yangshun |
Thanks for fixing it! 🎉 |
Great work @fiennyangeln 🎉 Proud as a senior 😭 |
Fix #911
Motivation
Fix the Nav in the docs page to take the full width so that when scrolled it does not scroll the main container
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)
No